{% load post_filters %}

<!-- 右侧 -->
<div class="col-md-4">

    <!-- 公众号广告 -->
    <div class="row ml-1" style="background-color: white">
        <div class="col-sm-12 mt-4">
            <p class="h5 border-bottom pb-2 mb-2">『皮爷撸码』公众号</p>
        </div>
    </div>
    <div class="row ml-1" style="background-color: white;">
        <div class="col-sm-12 p-0 text-center pb-2">
            <img src="{% static 'images/pylm-qrcode.png' %}" class="img-fluid">
        </div>
    </div>

     {% if feature_post %}
        <!-- 新发布 -->
        <div class="row ml-1 mt-4" style="background-color: white">
            <div class="col-sm-12 mt-4">
                <p class="h5 border-bottom pb-2 mb-2 ml-1 pl-0 mr-1 pr-0">公告</p>
            </div>
        </div>
        <!-- 文章列表 -->
        <div class="row ml-1" style="background-color: white">
            <ul class="col-sm-12 d-block">
                {% for feature in feature_post %}
                    <!-- 列表内容 -->
                    <li class="row mt-2 mb-2 ml-0 pl-1 mr-0 pr-1">
                        <div class="col-sm-12 d-flex justify-content-between pl-0 pr-0">
                            <p class="mb-0">{{ feature.title }}</p>
                            <p class="mb-0 small text-secondary">{{ feature.create_time | datapicker_format }}</p>
                        </div>
                        <div class="col-sm-12 pl-0 pr-0"><p class="text-muted small mb-0">{{ feature.description }}</p></div>
                    </li>
                {% endfor %}

            </ul>
        </div>
    {% endif %}

    {% if read_post %}
        <!-- 文章板块 -->
        <div class="row ml-1 mt-4" style="background-color: white">
            <div class="col-sm-12 mt-4">
                <p class="h5 border-bottom pb-2 mb-2 ml-1 pl-0 mr-1 pr-0">『皮爷撸码』阅读排行榜</p>
            </div>
        </div>
        <!-- 文章列表 -->
        <div class="row ml-1" style="background-color: white">
            <ul class="col-sm-12 d-block">
                {% for post in read_post %}
                    <!-- 列表内容 -->
                    <li class="row mt-2 mb-2 pb-2 ml-0 pl-1 mr-0 pr-1 border-bottom " style="height: 100px;">
                        <div class="col-sm-5 pl-0 h-100">
                            <a href="{% url 'post:detail' time_id=post.time_id %}" class="w-100 h-100">
                                <img src="{{ post.thumbnail }}" class="w-100 h-100">
                            </a>
                        </div>
                        <div class="col-sm-7 d-flex flex-column pl-0 pr-0 mt-1">
                            <p class="h6" style="font-size: .9rem"><a
                                    href="{% url 'post:detail' time_id=post.time_id %}"
                                    class="text-decoration-none text-dark">{{ post.title }}</a>
                            </p>
                            <div class="d-flex flex-row justify-content-between mt-auto">
                                <p class="font-weight-light small mb-0">阅读({{ post.read_num }})</p>
                                <p class="font-weight-light small mb-0">{{ post.publish_time_show | datapicker_format }}</p>
                            </div>
                        </div>
                    </li>
                {% endfor %}

            </ul>
        </div>
    {% endif %}
    {% if exchange_link %}
        <!-- 友链板块 -->
        <div class="row ml-1 mt-4" style="background-color: white">
            <div class="col-sm-12 mt-4">
                <p class="h5 border-bottom pb-2 mb-2 ml-1 pl-0 mr-1 pr-0">友情链接</p>
            </div>
        </div>

        <!-- 友链数据 -->
        <div class="row ml-1" style="background-color: white">
            <ul class="list-unstyled row col-sm-12 pl-1 ml-0 ">
                {% for link_item in exchange_link %}
                    <li class=" col-sm-6">
                        <a href="{{ link_item.url }}" class="text-decoration-none text-dark">
                            {{ link_item.show_name }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

</div>